    import React from 'react';
    import type { MenuProps } from 'antd';
    import { Menu } from 'antd';
    // import { getMenu } from '@/api/users';
    import logo from '@/assets/logo.png'
    import { useState,useEffect } from 'react'
    import icons from './iconList';
    import './index.scss'
    // import { setMenuList } from '@/store/login/authSlice'
    // import { useDispatch } from 'react-redux';
    import { useNavigate,useLocation } from 'react-router-dom';
    import { useSelector } from 'react-redux';

type MenuItem = Required<MenuProps>['items'][number];

// interface MenuItem{
//     key:string,
//     label:string,
//     icon?:React.ReactNode,
//     children?:MenuItem[]
// }

interface MenuItemFromData{
    key:string;
    label:string;
    icon:string;
    children?:MenuItemFromData[]
}

    function NavLeft(){
        const {menuList} = useSelector((state:any)=>state.authSlice)
        
        const [collapsed, setCollapsed] = useState(false);
        const [menuData,setMenuData]=useState<MenuItem[]>([])
        const location=useLocation();
        const navigate = useNavigate()
        useEffect(()=>{
            const selectedKey=location.pathname
            configMenu()
        },[menuList])

        // 请求接口
        async function configMenu(){
            // const {data} =  await getMenu()
            // dispatch(setMenuList(data))
            const mappedMenuItems:MenuItem[] = mapMenuItems(menuList)
            setMenuData(mappedMenuItems)
        }

        // 将返回的菜单数据转换为我们需要的格式
        function mapMenuItems(items:MenuItemFromData[]):any{
            return items.map((item:MenuItemFromData)=>({
                key: item.key,
                label: item.label,
                icon:icons[item.icon],
                children: item.children?mapMenuItems(item.children):null // 递归操作

            }))
        }

        function handleClick({key}:{key:string}){
            navigate(key)
        }
        return <div className='navleft'>
            <div className="logo">
                <img src={logo} alt="" width={18} />
                <h1>鹏远智慧园区</h1>
            </div>
            
            <Menu
                defaultSelectedKeys={['/dashboard']}
                defaultOpenKeys={['sub1']}
                mode="inline"
                theme="dark"
                onClick={handleClick}
                items={menuData}
                // 选中刷新后依然找到原有的位置
                selectedKeys={[location.pathname]}
        />
        </div>
    }

    export default NavLeft